<template>
  <div>
    <Input v-model="projectAddressName" :placeholder="placeholder" readonly>
      <Icon v-if="!disabled" class="icon-pin" type="md-pin" color="#2d8cf0" slot="suffix" @click="openMap" />
    </Input>

    <Modal v-model="modalValue" width="950" title="请输入或点击地图选择地址" :mask-closable="false">
      <div class="com-show-input-border modal-address">
        <Input element-id="suggestId" v-model="modalAddress" placeholder="请输入地址" @on-change="onChange"></Input>
      </div>
      <div id="l-map"></div>

      <Row slot="footer" type="flex" justify="center">
        <BtnPlain type="primary" @click="modalValue = false">取消</BtnPlain>
        <Button type="primary" @click="onSub">确定</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>

export default {
  name: 'mapSearch',
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    // 地址
    value: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '请点击右侧图标选择项目地址'
    },
    info: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    value: {
      handler (val) {
        this.projectAddressName = val
      }
    },
  },
  data () {
    return {
      projectAddressName: '',
      modalValue: false,
      customOverlay: null,
      location: {},
      map: null,
      address: '',
      modalAddress: '',
      ac: null
    }
  },
  methods: {
    setMap () {
      this.map = new BMapGL.Map('l-map');
      this.map.enableScrollWheelZoom(true);

      // 地图点击事件
      var geoc = new BMapGL.Geocoder();
      this.map.addEventListener('click', async (e) => {
        const { lng, lat } = e.latlng

        geoc.getLocation(e.latlng, (rs) => {
          const { province, city, district } = rs.addressComponents
          const title = rs.surroundingPois[0] ? rs.surroundingPois[0].title : ''
          this.address = rs.address + title
          this.ac.setInputValue(this.address)

          const area = province === city ? district : city
          this.createMarker(lng, lat, this.address, province, area)
        }, { poiRadius: 100, numPois: 5 })
      })

      // 输入框提示
      this.ac = new BMapGL.Autocomplete({
        "input": "suggestId",
        "location": this.map
      });
      this.ac.addEventListener("onconfirm", (e) => {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        const { lng, lat } = _value.location
        this.address = _value.province + _value.city + _value.district + _value.street + _value.business;

        const area = _value.province === _value.city ? _value.district : _value.city
        this.createMarker(lng, lat, this.address, _value.province, area, true)
      });

      const longitude = this.info.longitude * 1
      const latitude = this.info.latitude * 1
      const { province, city } = this.info
      let point
      if (longitude && latitude) {
        point = new BMapGL.Point(longitude, latitude);
        this.ac.setInputValue(this.projectAddressName)
        this.createMarker(longitude, latitude, this.projectAddressName, province, city)
      } else {
        point = this.info.city || '武汉市'
      }

      this.map.centerAndZoom(point, 12);

    },
    // 创建点, isAmplify是否自动放大地图
    async createMarker (lng, lat, address, province, city, isAmplify) {
      this.map.clearOverlays()
      const point = new BMapGL.Point(lng, lat)
      const marker = new BMapGL.Marker(point)
      this.map.addOverlay(marker)

      this.location = { lng, lat, province, city }

      if (isAmplify) {
        this.map.centerAndZoom(point, 18);
      }

      // 创建自定义覆盖物
      this.map.removeOverlay(this.customOverlay)
      this.customOverlay = new BMapGL.CustomOverlay(this.createDOM, {
        point,
        opacity: 0.5,
        offsetY: -10,
        properties: { address }
      });
      this.map.addOverlay(this.customOverlay);
    },

    onChange () {
      this.location = {}
      this.address = ''
      this.map.clearOverlays()
      this.map.removeOverlay(this.customOverlay)
    },

    openMap () {
      this.modalValue = true
      if (this.map) return

      this.$nextTick(() => {
        this.setMap()
      });
    },
    onSub () {
      if (!this.address) {
        this.$Message.error('请选择检索的地址，或在地图上直接锚点!');
        return
      }
      this.modalValue = false
      this.$emit('input', this.address)
      this.$emit('getLocation', this.location)
    },
    createDOM ({ address }) {
      var div = document.createElement('div');
      div.className = 'custom-overlay-search';
      div.innerText = '地址: ' + address + '';
      return div;
    },
  }
}
</script>

<style lang='less' scoped>
.icon-pin {
  cursor: pointer;
}
#l-map {
  width: 100%;
  height: 500px;
}

.modal-address {
  width: 600px;
  margin-bottom: 10px;
}
</style>
<style lang="less">
.custom-overlay-search {
  position: absolute;
  top: -40px;
  left: 0px;
  width: 300px;
  padding: 5px 10px;
  background-color: #fffeef;
  border-radius: 5px;
}

.tangram-suggestion-main {
  z-index: 99999;
}
</style>
